<template>
  <div>
    <el-dialog title="审核流程" :visible.sync="$parent.opendetailed" width="780px">
      <div class="center_dialog">
        <el-descriptions title="" :column="1">
          <el-descriptions-item label="当前节点">{{ userName || '无' }}</el-descriptions-item>
          <el-descriptions-item label="审核人">
            <label v-for="item in userType" :key="item.index">{{ item }},</label>
          </el-descriptions-item>
          <el-descriptions-item label="抄送人">
            <label v-for="item in userTypeCC" :key="item.index">{{ item }},</label>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider>审核流程</el-divider>
        <div class="accep_flex" align="center">
          <el-steps space="80px" align-center finish-status="success" direction="vertical">
            <el-step status="success" title="开始" icon="el-icon-s-help" :description="'开始时间：' + rowObj.applicationTime">
            </el-step>
            <el-step v-for="(item, index) in auditData" :key="index"
              :status="['wait', 'wait', 'success', 'error'][item.status]" :title="item.userName || '-'"
              v-show="item.userType === '0'" icon="el-icon-s-help">
              <span slot="description">
                审核时间：{{ item.auditTime || '-' }}
                <br />
                审核意见：{{ item.view || '-' }}
              </span>
            </el-step>
            <el-step :status="islength ? 'success' : 'wait'" title="结束" icon="el-icon-s-help">
            </el-step>
          </el-steps>
        </div>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button @click="() => $parent.opendetailed = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getaudit } from '@/api/management/management.js'
export default {
  props: ['rowObj'],
  data () {
    return {
      auditData: [],
      userName: '',
      userType: [],
      userTypeCC: [],
      islength: true
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    /**
     * 初始化
     */
    getlist () {
      let params = {
        applicationId: this.rowObj.allocationId,
        orderByColumn: 'auditTime',
        isAsc: 'desc'//倒叙
      }
      getaudit(params).then(res => {
        this.auditData = res.data
        this.auditData.forEach(item => {
          if (item.userType && item.userType === '0') {//审核人
            item.userName && this.userType.push(item.userName)
          } else {//抄送人
            item.userName && this.userTypeCC.push(item.userName)
          }
        })

        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          if (element.status !== '2' && element.userType === '0') {//获取当前节点
            this.islength = false
            return this.userName = element.userName
          }
        }

      })

    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 65%;
  // padding: 0 10% 0 10%;
  box-sizing: border-box;
  margin: 0px auto;
}

.accep_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>